
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { setNow } from '../../actions/actionSyncDemo';

class SyncDemo extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount = () => {
        this.timer = setInterval(() => {
            this.props.setNow();
        }, 30)
    }
    componentWillUnmount = () => {
        if (this.timer) {
            clearInterval(this.timer);
        }
    }

    render() {
        const props = this.props;

        return (<div>
            <div>现在时间：{props.now}</div>
        </div>);
    }
}

const mapStateToProps = state => state.syncState;

//第一种方式，使用了redux-thunk
const mapDispatchToProps_1 = (dispatch) => {
    return {
        setNow: () => {
            dispatch(setNow());//同步
        }
    }
};

//第二种方式，使用了redux-thunk
const mapDispatchToProps_2 = (dispatch) => {
    return bindActionCreators({
        setNow,
    }, dispatch);
}


//第一种方式，没有使用了redux-thunk
const mapDispatchToProps_3 = (dispatch) => {
    return {
        setNow: () => {
            setNow()(dispatch);//同步
        },
    }
};


//第二种方式，没有使用了redux-thunk
const mapDispatchToProps_4 = (dispatch) => {
    return bindActionCreators({
        setNow: () => {
            setNow()(dispatch);//同步
            return {
                type: ''
            };
        },
    }, dispatch);
}

const mapDispatchToProps = mapDispatchToProps_4;

export default connect(mapStateToProps, mapDispatchToProps)(SyncDemo);
